<template>
  <div class="experience-detail-container">
    <!-- 导航栏 -->
    <MMNavBar @onClickLeft="$router.go(-1)"></MMNavBar>
    <!-- 要么骨架屏 -->
    <van-skeleton title avatar :row="30" v-if="shareDetail === ''" />
    <!-- 要么渲染用户信息 template解析之后会被移除 -->
    <!-- <div v-else> -->
    <template v-else>
      <!-- 顶部 -->
      <div class="top-box">
        <!-- 标题 -->
        <div class="title">
          {{ shareDetail.title }}
        </div>
        <!-- 文章信息 -->
        <div class="info-box">
          <img :src="shareDetail.author.avatar" alt="" />
          <div class="name-box">
            <span class="name">{{ shareDetail.author.nickname }}</span>
            <span class="time">{{ shareDetail.created_at | formatTime }}</span>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="experience-content" v-html="shareDetail.content"></div>
    </template>
    <!-- </div> -->
    <!-- 评论 -->
    <div class="comment-box">
      <!-- 顶部评论 -->
      <div class="title">评论 <span class="num">68</span></div>
      <!-- 每一项 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="comment" v-for="item in commentList" :key="item.id">
          <!-- 姓名 点赞区域 -->
          <div class="info-box">
            <img :src="item.author.avatar" alt="" />
            <!-- 名字区域 -->
            <div class="name-box" @click="showPop(item)">
              <span class="name">{{ item.author.nickname }}</span>
              <span class="time">{{ item.created_at | formatTime }}</span>
            </div>
            <div class="zan-box">
              <span>{{ item.star || 0 }}</span>
              <i class="iconfont iconbtn_dianzan_small_nor"></i>
            </div>
          </div>
          <!-- 评论内容 -->
          <div class="content-box">
            <div class="content">{{ item.content }}</div>
            <div class="reply-box" v-if="item.children_comments.length > 0">
              <div
                class="reply"
                v-for="it in item.children_comments"
                :key="it.id"
              >
                <span class="name">{{ it.author }}:</span>
                {{ it.content }}
              </div>
            </div>
          </div>
          <!-- 回复评论 -->
        </div>
      </van-list>
    </div>

    <!-- 底部盒子 -->
    <transition name="van-slide-up">
      <div v-if="shareDetail" class="bottom-box">
        <div class="input" @click="showPop()">我来补充两句</div>
        <div class="shoucang">
          <i class="iconfont iconbtn_shoucang_nor"></i>
          234
        </div>
        <!-- 点赞框 -->
        <div class="star" :class="{ actived: isStar }" @click="likeArticle">
          <i class="iconfont iconbtn_dianzan_small_nor"></i>
          <!-- 短路运算  2个都是true才会执行 -->
          {{ shareDetail && shareDetail.star }}
        </div>
        <!-- 弹出分享窗口 -->
        <div class="share" @click="showSharePop">
          <i class="iconfont iconbtn_share"></i>
          998
        </div>
      </div>
    </transition>
    <!-- 底部回复弹出层 -->
    <van-popup
      class="input-pop"
      v-model="show"
      position="bottom"
      :style="{ height: '24%' }"
    >
      <van-field
        autosize
        type="textarea"
        autofocus
        v-model="value"
        :placeholder="placeholder"
        rows="4"
      />
      <span @click="subComment">发送</span>
    </van-popup>
    <!-- 分享弹出层 -->
    <van-popup v-model="showShare">
      <!-- 没图显示div -->
      <div v-if="!popImgUrl" class="share-box" ref="shareBox">
        <div class="text">
          长按图片下载并分享
        </div>
        <div class="share-content-box">
          <div class="title">
            {{ shareDetail.title }}
          </div>
          <div class="user-box">
            <img :src="shareDetail && shareDetail.author.avatar" alt="" />
            <span>{{ shareDetail && shareDetail.author.nickname }}</span>
          </div>
          <div class="content">
            {{ shareDetail.contentText }}
          </div>
          <img class="logo" src="../../assets/img_share_logo@2x.png" alt="" />
          <!-- 二维码图片 -->
          <img class="code" :src="codeUrl" alt="" />
          <div class="direction">长按识别二维码查看原文</div>
        </div>
      </div>
      <!-- 有图就显示图片 -->
      <img v-else :src="popImgUrl" alt="" class="share-img" />
    </van-popup>
  </div>
</template>

<script>
// 导入数据接口
import {
  shareDetail,
  shareComments,
  sendComment,
  likeArticle
} from '../../api/find'
// 导入map辅助函数
import { mapMutations, mapState } from 'vuex'
// 导入 二维码模块
import QRCode from 'qrcode'
// 导入 截图模块
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      // 是否显示pop弹出层
      show: false,
      // 是否显示分享框
      showShare: false,
      // 输入框的内容
      value: '',
      // 定义详情数据
      shareDetail: '',
      // 是否正在加载
      loading: false,
      // 是否加载完毕
      finished: false,
      // 分页参数
      start: 0,
      limit: 4,
      // 评论列表
      commentList: [],
      // 评论占位提示
      placeholder: '我来补充两句',
      // 回复的评论数据对象
      parentComment: '',
      // 二维码地址
      codeUrl: '',
      // 弹框图片地址
      popImgUrl: ''
    }
  },
  created () {
    // 获取详情信息
    shareDetail(this.$route.params.id).then(res => {
      // console.log(res)
      if (res.data.author.avatar) {
        res.data.author.avatar =
          process.env.VUE_APP_URL + res.data.author.avatar
      }
      this.shareDetail = res.data
    })
  },
  // dom加载完毕
  async mounted () {
    // 使用QRCode生成二维码
    const codeUrl = await QRCode.toDataURL(window.location.href)
    // console.log(codeUrl)
    this.codeUrl = codeUrl
  },
  // 计算属性
  computed: {
    // 合并用户信息
    ...mapState(['userInfo']),
    // 计算属性 判断是否点赞
    isStar () {
      // 如果登陆了
      if (this.userInfo) {
        // 获取当前的文章id 类型字符串
        const id = +this.$route.params.id
        // 获取用户点赞的id数组 数字数组
        const isStar = this.userInfo.starArticles.includes(id)
        console.log(isStar)
        return isStar
      } else {
        // 没有登陆
        return false
      }
    }
  },
  // 方法
  methods: {
    ...mapMutations(['SETPROPVALUE']),
    // 弹出分享框
    async showSharePop () {
      await this.$checkLogin()
      // 弹出弹框
      this.showShare = true
      if (this.popImgUrl) return
      // 滚到顶部 保证可以截图1
      window.scrollTo(0, 0)
      // 弹框 要等一会才出来 为了保证获取到 我们可以写到`nexttTick`中
      this.$nextTick(async () => {
        // console.log(this.$refs.shareBox)
        // 生成 弹框截图
        const canvas = await html2canvas(this.$refs.shareBox, {
          // 解决图片不显示问题
          allowTaint: true,
          useCORS: true
        })
        // 转为 url
        const popImgUrl = canvas.toDataURL()
        // console.log(popImgUrl)
        // 保存url地址
        this.popImgUrl = popImgUrl
      })
    },
    // 点赞文章
    async likeArticle () {
      // loading
      this.$toast.loading({ duration: 0 })
      // 判断是否登陆
      await this.$checkLogin()
      // 到这里说明 登录
      const res = await likeArticle({ article: this.$route.params.id })
      console.log(res)
      // 同步更新`Vuex`
      this.SETPROPVALUE({
        propName: 'starArticles',
        propValue: res.data.list
      })
      // 修改点赞数
      this.shareDetail.star = res.data.num
      // 关闭loading
      this.$toast.clear()
    },
    // 提交评论的逻辑
    async subComment () {
      try {
        // 校验登录
        await this.$checkLogin()
        // 判断是发给谁的评论
        const data = {
          content: this.value
        }
        // 根据是否有parentComment 生成数据对象
        if (this.parentComment) {
          // 回复评论
          data.parent = this.parentComment.id
        } else {
          // 发表评论 给文章
          data.article = this.$route.params.id
        }
        // 发表评论{content:'',parent:'231'}
        const res = await sendComment(data)
        if (res.data.parent) {
          // 回复评论
          // 添加到父评论中
          this.parentComment.children_comments.push(res.data)
          // 清空父评论
          this.parentComment = ''
        } else {
          // 文章评论
          if (res.data.author.avatar) {
            res.data.author.avatar =
              process.env.VUE_APP_URL + res.data.author.avatar
          }
          // 追加到数组的顶端
          this.commentList.unshift(res.data)
        }
        // 提示用户成功
        this.$toast.success('发表成功')
        // 关闭框框
        this.show = false
        // 清空输入框
        this.value = ''
      } catch (error) {
        console.log('出错了哦', error)
      }
    },
    // 弹出回复评论框
    showPop (item) {
      console.log(item)
      // 保存
      this.parentComment = item
      // item有值 回复
      if (item) {
        this.placeholder = `回复:${item.author.nickname}`
      } else {
        this.placeholder = '我来补充两句'
      }
      // item没值 直接评论
      this.show = true
    },
    // 触底加载
    onLoad () {
      // 获取数据
      shareComments({
        id: this.$route.params.id,
        start: this.start,
        limit: this.limit
      }).then(res => {
        console.log(res)
        res.data.list.forEach(v => {
          if (v.author.avatar) {
            v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
          }
        })

        // 赋值
        this.commentList.push(...res.data.list)
        // 关闭loading
        this.loading = false
        // 累加页码
        this.start += this.limit
        // 判断是否完毕
        if (this.commentList.length >= res.data.total) {
          this.finished = true
        }
      })
    }
  }
}
</script>

<style lang="less">
.experience-detail-container {
  background-color: @white-color;

  // 设置高亮
  .actived {
    // 虽然 important比较暴力
    // 这里的需求是 只要有 必须亮
    color: @main-color !important;
  }

  .van-nav-bar__left {
    padding-left: 0;
  }
  .iconbtn_nav_back {
    font-size: 44px;
  }
  .top-box {
    background-color: @white-color;
    padding: 15px;
    .title {
      font-size: 18px;
      font-weight: 500;
    }
  }
  .info-box {
    margin-top: 15px;
    display: flex;
    align-items: center;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 9px;
    }
    .name-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      .name {
        font-size: 12px;
        font-weight: 600;
        color: @subdominant-font-color;
      }
      .time {
        font-size: 12px;
        color: @minor-font-color;
      }
    }
    .zan-box {
      span {
        color: @minor-font-color;
        font-size: 12px;
      }
      .iconfont {
        color: @minor-font-color;
        font-size: 24px;
      }
    }
  }
  .experience-content {
    padding: 15px;
    font-size: 16px;
    color: @main-font-color;
    background-color: @white-color;
    img {
      width: 100%;
      display: block;
    }
  }
  .comment-box {
    margin-top: 10px;
    background-color: @white-color;
    padding: 26px 15px;
    .title {
      font-size: 18px;
      font-weight: 500;
      position: relative;
      span {
        color: @minor-font-color;
        font-size: 12px;
        position: absolute;
        left: 40px;
        top: -5px;
      }
    }
    .content-box {
      padding-left: 44px;
      .content {
        margin-top: 11px;
        font-size: 16px;
        color: @main-font-color;
        line-height: 27px;
      }
      .reply-box {
        margin-top: 5px;
        padding-top: 5px;
        padding-left: 15px;
        padding-bottom: 12px;
        background: @border-color;
        .reply {
          font-size: 14px;
          color: @subdominant-font-color;
          word-break: break-all;
          &:not(:first-child) {
            margin-top: 15px;
          }
          .name {
            font-weight: 500;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .bottom-box {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 85px;
    display: flex;
    box-sizing: border-box;
    padding: 10px 15px 0;
    background-color: @white-color;
    width: 100%;
    justify-content: space-between;
    .input {
      height: 34px;
      background: @border-color;
      border-radius: 4px;
      flex: 1;
      font-size: 14px;
      margin-top: 10px;
      color: @subdominant-font-color;
      margin-right: 24px;
      line-height: 34px;
      padding-left: 6px;
    }
    div:not(.input) {
      font-size: 12px;
      color: @subdominant-font-color;
      i {
        display: block;
        font-size: 28px;
      }
    }
    .shoucang {
      margin-right: 24px;
    }
    .star {
      margin-right: 24px;
    }
  }
  .input-pop {
    padding: 25px 15px 0;
    overflow: hidden;
    // 弹出层
    .van-cell::after {
      border-bottom: none;
    }
    .van-field {
      height: 99px;
      width: 100%;
      background: @border-color;
      border-radius: 4px;
    }
    span {
      font-size: 16px;
      color: @subdominant-font-color;
      float: right;
      margin-top: 11px;
    }
  }
  // 底部弹出层
  .share-box {
    width: 311px;
    height: 553px;
    background-size: 100% 100%;
    background-position-x: 0;
    background-position-y: 0;
    padding: 0 15px 15px;
    background-image: url('../../assets/img_share_bj@2x.png');
    display: flex;
    flex-direction: column;
    .text {
      text-align: center;
      font-size: 12px;
      color: @white-color;
      padding: 15px;
    }
    .share-content-box {
      flex: 1;
      background-color: @white-color;
      border-radius: 10px;
      padding: 0 15px;
      .title {
        font-size: 16px;
        margin-top: 20px;
      }
      .user-box {
        margin-top: 15px;
        display: flex;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          margin-right: 5px;
        }
        span {
          font-size: 12px;
        }
      }
      .content {
        font-size: 16px;
        margin-top: 20px;
        height: 165px;
        overflow: hidden;
        position: relative;
        &::after {
          content: '';
          width: 100%;
          bottom: 0;
          left: 0;
          height: 25px;
          background-color: @white-color;
          opacity: 0.9;
          position: absolute;
        }
      }
      .logo {
        width: 150px;
        display: block;
        margin: 20px auto;
      }
      .code {
        margin: 0 auto;
        display: block;
        width: 80px;
      }
      .direction {
        font-size: 12px;
        text-align: center;
        margin-top: 20px;
        color: @minor-font-color;
      }
    }
  }
  // 分享图片
  .share-img {
    width: 311px;
    height: 553px;
    display: block;
  }
}
</style>
